<template>
  <div id="widgetDiv">
    <el-select v-model="element.options.defaultValue"
               :clearable="element.options.clearable"
               :disabled="element.options.disabled"
               :placeholder="element.options.placeholder"
               :style="{width: isInTable ? '100%' : element.options.isWidgetWidth ? `${element.options.width}%` : '100%' }">
      <el-option v-for="(item, index) in element.options.options" :key="item.value + index" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'select_JCK18LBm-widget',
  props: ['element', 'isInTable', 'platform'],
  data () {
    return {
    };
  },
  watch: {
    'element.options.defaultValue': {
      handler: function (value) {
        if (value && value !== '') {
          for (const option of this.element.options.options) {
            if (option.value === value) {
              value = option.label;
              return value;
            }
          }
        }
      }
    }
  }
};
</script>

<style scoped>
#widgetDiv {

}
</style>
